/**
 * NK卡
 */
<template>
  <div>
    <div v-if="isCard">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> 
        <el-breadcrumb-item>Gwhale卡</el-breadcrumb-item> 
      </el-breadcrumb>

      <!-- 常规卡
      共享卡 --> 
      <div style="padding:20px 0 0 0" v-if="userInfo.userId!='1606'">   
        <el-row :gutter="20" >
          <el-col :span="24">  
            <el-col :span="4">
              <el-card class="card_wallet">
                <el-col :span="16">
                  <div style="padding-bottom: 20px;">
                    <span class="font12">共享卡钱包总额</span>
                    <div class="font18 text-black font-w6 margin-t10" >
                      {{ userInfo.matrixBalance }}
                      <!-- {{ (userInfo.userType == '01' || userInfo.userType=='02')?userInfo.matrixBalance:info.userMatrixBalances  }}  -->
                    </div>
                   
                  </div>
                </el-col>
                <el-col :span="8">
                  <img src="~@/assets/img/icon_card2.png" />
                </el-col>
              </el-card>
            </el-col> 
            
          </el-col> 
        </el-row>
      </div>  

      <div class="boxBlock"> 
        <div  class="tabBox" >
          <span  v-for="(item,index) in tabList" :key="index" :class="activeName==index?'cur':''" @click="changeTab(index,item)" >{{ item.name }}</span>  
        </div>
        <!-- serachTop -->
         <div class="">   
          <!-- 搜索筛选 -->
          <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.cardNo"
                placeholder="输入卡号后四位"
                type="number"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="请输入使用者ID"
                type="number"
                v-if='hasPermission'
                clearable
              ></el-input>
            </el-form-item> 
            <!-- <el-form-item >
              <el-input
                size="small"
                v-model="formInline.parentUserId"
                placeholder="请输入所有者ID"
                clearable
              ></el-input>
            </el-form-item>   --> 
            <el-form-item>
              <el-date-picker
                v-model="value1"
                size="small"
                type="datetimerange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="createdData"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-select
                size="small"
                v-model="formInline.cardStatus"
                placeholder="请选择卡状态"
                clearable
              >
                <el-option label="请选择卡状态" value=""></el-option>
                <el-option
                  v-for="type in cardData"
                  :label="type.key"
                  :value="type.value"
                  :key="type.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item >
              <el-select   v-model="formInline.groupId" placeholder="请选择分组" style="width:200px"  size="small" clearable>
              <el-option v-for="item in groupList" :label="item.groupName" :value="item.groupId" :key="item.id"></el-option> 
            </el-select>
          </el-form-item>  

            <div v-if="formInline.cardType!='share'">
              <el-form-item label="卡片余额区间"  >
                <el-input-number v-model="formInline.cardBalanceMin" size="small" :min="0"   />
                至
                <el-input-number v-model="formInline.cardBalanceMax" size="small" :min="formInline.cardBalanceMin"  />
              </el-form-item> 

              <el-form-item >
                <el-input
                  size="small"
                  v-model="formInline.remark"
                  placeholder="请输入备注" 
                  clearable
                ></el-input>
              </el-form-item> 
            </div> 
            <el-form-item  v-else>
                <el-input
                  size="small"
                  v-model="formInline.remark"
                  placeholder="请输入备注" 
                  clearable
                ></el-input>
              </el-form-item> 
            
          </el-form>

          <div style="padding-bottom:20px">  
                <block v-if="hasPermission1" >
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="search"
                    >搜索</el-button
                  > 
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-plus"
                    @click="handleEdit('addCardForm')"
                    v-if="userInfo.userId!='1606'"
                    >开卡</el-button>
                  <el-button
                    size="small"
                    type="success"
                    icon="el-icon-plus"
                    @click="handleEdit('addForm')"  
                    v-if="userInfo.userId!='1606'"
                    >快速开卡</el-button
                  >
                </block> 
                <el-button
                  size="small"
                  type="danger"
                  @click="isfreezeEdits('冻结', 'freeze')"
                  :disabled="changeIDList.length == 0"
                  v-if="hasPermission2&&userInfo.userId!='1606'"
                  class="deepC"
                >

                  批量冻结
                </el-button>
                <el-button
                  size="small"
                  type="warning"
                  @click="isfreezeEdits('解冻', 'unfreeze')"
                  :disabled="changeIDList.length == 0"
                  v-if="hasPermission2&&userInfo.userId!='1606'"
                  class="deepC"
                >
                  批量解冻
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="deleteEdits()"
                  :disabled="changeIDList.length == 0"
                  v-if="hasPermission2&&userInfo.userId!='1606'"
                  class="deepg" 
                >
                  批量销卡
                </el-button>
                <el-button size="small" type="primary" icon="el-icon-download" @click="exportEx()" v-if="hasPermission4">
                  导出
                </el-button>
           </div> 
        </div> 
      <!--列表-->
      <div class="ra_box"> 
        <el-table
          size="small"
          :data="listData"
          highlight-current-row
          v-loading="loading"
          element-loading-text="拼命加载中"
          style="width: 100%"
          v-if="listData"
          @selection-change="toggleSelection"
        >
          <el-table-column type="selection" width="65"> </el-table-column>
          <el-table-column prop="cardNo" label="卡号"  width="225" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{ scope.row.cardNo }}  <i class="el-icon-document-copy copyBtn" @click="copyText(scope.row.cardNo)"></i></div>
            </template>
          </el-table-column> 
          <!-- <el-table-column prop="cardId" label="卡ID" show-overflow-tooltip>
        </el-table-column> -->
          <!-- <el-table-column
            prop="cardBin"
            label="卡Bin"
            show-overflow-tooltip
            width="90"
          >
          </el-table-column> --> 
          <el-table-column
             prop="parentUserId"
            label="所有者ID"
            show-overflow-tooltip
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="userId"
            label="使用者ID"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>

         <el-table-column 
            prop="cvv"
            label="cvv"
            show-overflow-tooltip
            width="120"
            v-if="hasPermission3"
          >
          <template slot-scope="scope">  
              <div  > {{ scope.row&&scope.row.cvv?scope.row.cvv:'***'}}   <i class="el-icon-view copyBtn" v-if="!scope.row.cvv" @click="getShowCvv(scope.$index,scope.row)"></i></div>
          </template>
         </el-table-column>

         <el-table-column
            prop="expirationDate"
            label="有效期"
            show-overflow-tooltip
            width="120"
            v-if="hasPermission3"
          >
          <template slot-scope="scope">
              <div>
                {{ scope.row&&scope.row.expirationDate?scope.row.expirationDate:'*****' }} 
                <i class="el-icon-view copyBtn" v-if="!scope.row.expirationDate" @click="getShowCvv(scope.$index,scope.row)"></i>
              </div>
          </template>
         </el-table-column>

         <el-table-column
            prop="groupName"
            label="分组名称"
            show-overflow-tooltip
            min-width="90"
          >   
          <template slot-scope="scope">
              <div>
                {{ scope.row.groupName?scope.row.groupName:'默认分组'  }}  
              </div>
          </template>
          </el-table-column>

          <el-table-column
            prop="cardCurrency"
            label="卡币种"
            show-overflow-tooltip
            width="90"
          >
          </el-table-column>
          <el-table-column
            prop="cardScheme"
            label="卡组织"
            show-overflow-tooltip
            width="110"
          >
          </el-table-column>
          <el-table-column
            prop="cardBalance"
            label="卡片余额"
            show-overflow-tooltip
            width="110"
            v-if="formInline.cardType!='share'"
          >
            <template slot-scope="scope">
              <div>{{ b(scope.row.cardBalance) }}</div>
            </template>
          </el-table-column>


          <el-table-column
            prop="cardBalance"
            label="限额详情"
            show-overflow-tooltip
            width="110"
            v-if="formInline.cardType=='share'"
          >
            <template slot-scope="scope"> 
              <span @click="lookDetails(scope.row)"><i class="el-icon-view" ></i>查看</span> 
            </template>
          </el-table-column> 

          <el-table-column
            prop="cardStatus"
            label="卡状态"
            show-overflow-tooltip
            width="90"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.cardStatus == null
                    ? "可用"
                    : cardTypeData[scope.row.cardStatus]
                }}
              </div>
            </template>
          </el-table-column> 

          <el-table-column
            prop="createdAt"
            label="创建时间"
            show-overflow-tooltip 
            width="185" 
          >
            <template slot-scope="scope">
              {{ timestampToTime(scope.row.createdAt) }} 
            </template>
          </el-table-column> 
          <el-table-column prop="remark" label="备注" show-overflow-tooltip  min-width="180" > 
            <template slot-scope="scope">
              <i
                class="el-icon-edit-outline font18 font-w6 margin-l5"
                @click="changEdit(scope.row)"
              >
              </i>
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" width="280" >
            <template slot-scope="scope">
              <el-button size="mini" plain    @click="changCard('', scope.row)">
                查看
              </el-button>
              <!-- <el-button size="mini" type="text" @click="changEdit(scope.row)">
              编辑 
            </el-button> -->   
              <el-dropdown v-if="userInfo.userId!='1606'">
                <el-button type="primary" size="mini" style="margin:0 10px" >
                  更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="hasPermission5&& formInline.cardType!='share'">
                    <el-button
                      size="mini"
                      type="success" plain
                      @click="rechargeEdit(scope.$index, scope.row)"
                      :disabled="
                        scope.row.cardStatus != 'normal' &&
                        scope.row.cardStatus != null
                      "
                      v-if="hasPermission5&& formInline.cardType!='share'"

                    >
                      充值
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="hasPermission5&&formInline.cardType!='share'">
                    <el-button
                      size="mini"
                      type="info" plain
                      @click="refundEdit(scope.$index, scope.row)"
                      :disabled="
                        scope.row.cardStatus != 'normal' &&
                        scope.row.cardStatus != null
                      "
                      v-if="hasPermission5&&formInline.cardType!='share'"
                      style="color: #999; cursor: pointer;"
                    >
                      退回
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item  v-if="hasPermission2"  >
                    <el-button
                        type="danger" plain  size="mini"
                        @click="deleteEdit(scope.$index, scope.row)"
                        :disabled="
                          scope.row.cardStatus != 'normal' &&
                          scope.row.cardStatus != null
                        "
                        v-if="hasPermission2"                 
                      >
                  
                        销卡
                      </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item  v-if="hasPermission2"  >
                    <el-button
                        plain 
                        size="mini" type="primary"  
                      @click="updateCard(scope.row.cardId)"
                        v-if="hasPermission2"  
                        style="color: #fff; cursor: pointer; background-color: #999;"
                    >
                      更新
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item  v-if="hasPermission2"  >
                    <el-button
                        type="warning" plain  size="mini" 
                        @click="isfreezeEdit('冻结', 'freeze', scope.row)"
                        :disabled="
                          scope.row.cardStatus != 'normal' &&
                          scope.row.cardStatus != null
                        "
                        v-if="hasPermission2"  
                      > 
                        冻结
                      </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item  v-if="hasPermission2">
                    <el-button 
                      type="success" plain size="mini"
                        @click="isfreezeEdit('解冻', 'unfreeze', scope.row)"
                        :disabled="scope.row.cardStatus != 'frozen'"
                        v-if="hasPermission2"
                        
                      >
                        解冻
                      </el-button> 
                  </el-dropdown-item>
                  <el-dropdown-item  v-if="formInline.cardType=='share'">
                    <el-button 
                    type="danger" plain  size="mini"
                      @click="setLimitEdit(scope.row)" 
                      v-if="formInline.cardType=='share'"
                    >
                      限额 
                    </el-button> 
                  </el-dropdown-item>

                  <el-dropdown-item >
                    <el-button 
                    type="success" plain  size="mini"
                      @click="setgroupEdit(scope.row)" 
                    >
                      分组 
                    </el-button> 
                  </el-dropdown-item>
                   
                </el-dropdown-menu>
              </el-dropdown> 

            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
    </div>
    <div v-else>
      <cardItem
        @changCard="changCard"
        :isCard="isCard"
        :fatherName="fatherName"
        :cardInfo="cardInfo"
      ></cardItem>
    </div>

    <!-- 开卡界面 -->
    <el-dialog
      title="开卡"
      :close-on-click-modal="false"
      :visible.sync="addCardFormVisible"
      width="65%"
      @close="closeDialog('addCardForm')"
    >
      <el-form
        label-width="120px"
        :model="addCardForm"
        :rules="rulesAddCard"
        ref="addCardForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="卡有效期" prop="cardExpirationDate">
              <el-input
                size="small"
                v-model="addCardForm.cardExpirationDate"
                auto-complete="off"
                placeholder="请输入卡有效期,一年起"
                class="timeCard"
              ></el-input>
              <el-button size="mini" type="text"  @click="dateTime(12)"
                >一年</el-button
              >
              <el-button size="mini" type="text" @click="dateTime(24)"
                >两年</el-button
              >
              <el-button size="mini" type="text" @click="dateTime(30)"
                >两年半</el-button
              >
            </el-form-item>
            <el-form-item label="开卡币种" prop="cardCurrency">
              <el-input
                size="small"
                v-model="addCardForm.cardCurrency"
                auto-complete="off"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="卡组织" prop="cardScheme">
              <el-radio-group
                v-model="addCardForm.cardScheme"
                @input="changeBin"
              >
                <el-radio label="VISA"></el-radio>
                <el-radio label="MasterCard"></el-radio>
                <el-radio label="Discover"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="卡BIN" prop="cardBin">
              <el-radio-group
                v-model="addCardForm.cardBin"
                size="mini"
                class="radio_box"
              >
                <el-radio-button
                  v-for="k in BinData"
                  :label="k.cardBin"
                  :value="k.cardBin"
                  :key="k.cardBin"
                ></el-radio-button>
              </el-radio-group>

              <div
                class="bg-gray margin-t10" style="box-sizing: border-box; padding: 20px;"
                v-html="cardmsg[addCardForm.cardBin]"
              ></div>

              <!-- <i class="el-icon-warning-outline font12">
            每张卡的开卡手续费为 1.00 USD，每月1日0点收取当前有效卡数量*0.1
          </i> -->
            </el-form-item>
            <el-form-item label="卡类型" prop="cardType">
              <el-radio-group v-model="addCardForm.cardType">
                <el-radio label="recharge" v-if="formInline.cardType=='recharge'">常规卡</el-radio>
                <el-radio label="share" v-if="formInline.cardType=='share'">共享卡</el-radio> 
              </el-radio-group>
            </el-form-item>
            <el-form-item label="钱包余额" prop="balance"  v-if="formInline.cardType=='recharge'&&userInfo">
              {{ b(userInfo.balance) }}
            </el-form-item>

            <el-form-item label="共享卡钱包余额" prop="balance"  v-if="formInline.cardType=='share'&&userInfo">
              {{ b(userInfo.matrixBalance) }}
            </el-form-item> 
            <el-form-item
              label="转入金额"
              prop="rechargeAmount"
              v-if="addCardForm.cardType == 'recharge'"
            >
              <el-input
                size="small"
                v-model="addCardForm.rechargeAmount"
                auto-complete="off"
                placeholder="转入金额 > 20"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                size="small"
                v-model.trim="addCardForm.remark"
                :rows="5"
                auto-complete="off"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="国籍"
              prop="nationalityCountryCode"
              class="select10"
            >
              <el-select
                size="small"
                v-model="addCardForm.nationalityCountryCode"
                placeholder="请选择国籍"
                filterable
              >
                <el-option
                  v-for="(type, index) in nation"
                  :label="type.label"
                  :value="type.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="持卡人名字" prop="firstName">
              <el-input
                size="small"
                v-model="addCardForm.firstName"
                auto-complete="off"
                placeholder="请输入持卡人名字"
              ></el-input>
            </el-form-item>
            <el-form-item label="持卡人姓" prop="lastName">
              <el-input
                size="small"
                v-model="addCardForm.lastName"
                auto-complete="off"
                placeholder="请输入持卡人姓"
              ></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="dateOfBirth" class="select8">
              <el-date-picker
                size="small"
                v-model="addCardForm.dateOfBirth"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <el-button
                size="small"
                @click="getRandomDate()"
                class="margin-l10"
              >
                随机生日
              </el-button>
            </el-form-item>
            <!-- <el-form-item label="邮箱" prop="email" class="select8">
              <el-input
                size="small"
                v-model="addCardForm.email"
                auto-complete="off"
                placeholder="请输入持卡人邮箱"
              ></el-input>
              <el-button
                size="small"
                @click="getRandomEmail()"
                class="margin-l10"
              >
                随机邮箱
              </el-button>
            </el-form-item> -->
            <!-- <el-form-item label="手机号" prop="mobile" class="select8">
              <el-input
                placeholder="请输入手机号"
                v-model="addCardForm.mobile"
                class="input-with-select"
              >
                <el-select
                  v-model="addCardForm.mobilePrefix"
                  slot="prepend"
                  placeholder="请选择手机号前缀"
                  class="mobilePrefix"
                  filterable
                >
                  <el-option
                    v-for="(type, index) in phoneInfo"
                    :label="type.label"
                    :value="type.value"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-input>
              <el-button
                size="small"
                @click="getRandomPhone()"
                class="margin-l10"
              >
                随机号码
              </el-button>
            </el-form-item> -->
              <!-- <i class="el-icon-warning-outline font12">
                请如实填写正确的手机号和邮箱，特殊业务将会通过该字段发送验证码
              </i> -->
            
            <el-form-item
              label="账单地国家"
              prop="residentialCountryCode"
              class="select10"
            >
              <el-select
                size="small"
                v-model="addCardForm.residentialCountryCode"
                placeholder="请选择国家"
                filterable
              >
                <el-option
                  v-for="type in nation"
                  :label="type.label"
                  :value="type.value"
                  :key="type.value"
                  @click.native="getChild(type)"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="账单地州省"
              prop="residentialState"
              class="select10"
            >
              <el-select
                size="small"
                v-model="addCardForm.residentialState"
                placeholder="请选择账单地州省"
                filterable
                v-if="dentialState"
              >
                <el-option
                  v-for="(type, index) in dentialState"
                  :label="type.value"
                  :value="type.value"
                  :key="index"
                ></el-option>
              </el-select>
              <el-input
                size="small"
                v-model="addCardForm.residentialState"
                auto-complete="off"
                placeholder="请输入账单地州省"
                v-else
              ></el-input>
            </el-form-item>
            <el-form-item label="账单城市" prop="residentialCity">
              <el-input
                size="small"
                v-model="addCardForm.residentialCity"
                auto-complete="off"
                placeholder="请输入账单城市"
              ></el-input>
            </el-form-item>
            <el-form-item label="账单详细地址" prop="residentialAddress">
              <el-input
                size="small"
                v-model="addCardForm.residentialAddress"
                auto-complete="off"
                placeholder="请输入账单详细地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="账单地邮编" prop="residentialPostalCode">
              <el-input
                size="small"
                v-model="addCardForm.residentialPostalCode"
                auto-complete="off"
                placeholder="请输入账单地邮编"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('addCardForm')"
          >取消</el-button
        >
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="verArry.includes('/api/photon/cardAndHolderApply')?FormCardVer('noraml'):submitFormCard()"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 快速开卡界面 -->
    <el-dialog
      title="快速开卡"
      :close-on-click-modal="false"
      :visible.sync="addFormVisible"
      width="65%"
      @close="closeDialog('addForm')"
    >
      <el-form
        label-width="120px"
        :model="addForm"
        :rules="rulesAdd"
        ref="addForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="卡有效期" prop="cardExpirationDate">
              <el-input
                size="small"
                v-model="addForm.cardExpirationDate"
                auto-complete="off"
                placeholder="请输入卡有效期,一年起"
                class="time"
              ></el-input> 
              <el-button size="mini" type="text"   plain @click="dateTime(12)"
                >一年</el-button
              >
              <el-button size="mini" type="text" plain @click="dateTime(24)"
                >两年</el-button
              > 
              <el-button size="mini" type="text"  plain @click="dateTime(30)"
                >两年半</el-button
              >
            </el-form-item>
            <el-form-item label="开卡数量" prop="cardNum"> 
              <el-input-number v-model="addForm.cardNum" :min="1" ></el-input-number>
            </el-form-item>
            <el-form-item label="开卡币种" prop="cardCurrency">
              <el-input
                size="small"
                v-model="addForm.cardCurrency"
                auto-complete="off"
                disabled
              ></el-input>
            </el-form-item> 
          
            <el-form-item label="钱包余额" prop="balance"  v-if="formInline.cardType=='recharge'&&userInfo">
              {{ b(userInfo.balance) }}
            </el-form-item>

            <el-form-item label="共享卡钱包余额" prop="balance"  v-if="formInline.cardType=='share'&&userInfo">
              {{ b(userInfo.matrixBalance) }}
            </el-form-item> 
             
            <el-form-item
              label="转入金额"
              prop="rechargeAmount"
              v-if="addForm.cardType == 'recharge'"
            >
              <el-input
                size="small"
                v-model="addForm.rechargeAmount"
                auto-complete="off"
                placeholder="转入金额 > 20"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark" v-if="hasPermission2">
              <el-input
                type="textarea"
                size="small"
                v-model.trim="addForm.remark"
                :rows="5"
                auto-complete="off"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"> 
            <el-form-item label="卡类型" prop="cardType">
              <el-radio-group v-model="addCardForm.cardType">
                <el-radio label="recharge" v-if="formInline.cardType=='recharge'">常规卡</el-radio>
                <el-radio label="share" v-if="formInline.cardType=='share'">共享卡</el-radio> 
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="卡组织" prop="cardScheme">
              <el-radio-group v-model="addForm.cardScheme" @input="changeBin">
                <el-radio label="VISA"></el-radio>
                <el-radio label="MasterCard"></el-radio>
                <el-radio label="Discover"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="卡BIN" prop="cardBin">
              <el-radio-group
                v-model="addForm.cardBin"
                size="mini"
                class="radio_box"
              >
                <el-radio-button
                  v-for="k in BinData"
                  :label="k.cardBin"
                  :value="k.cardBin"
                  :key="k.cardBin"
                ></el-radio-button>
              </el-radio-group>

              <div
                class="bg-gray  padding-r20 bor-r5 margin-t10" style="box-sizing: border-box; padding: 20px;"
                v-html="cardmsg[addForm.cardBin]"
              ></div>

              <!-- <i class="el-icon-warning-outline font12">
            每张卡的开卡手续费为 1.00 USD，每月1日0点收取当前有效卡数量*0.1
          </i> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('addForm')">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title" 
          @click="verArry.includes('/api/photon/cardApply')?FormCardVer('fast'):submitForm()"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 充值界面 -->
    <el-dialog
      :close-on-click-modal="false"
      title="充值"
      :visible.sync="rechargeFormVisible"
      width="40%"
      @close="closeDialog('rechargeForm')"
    >
      <el-form
        label-width="120px"
        :model="rechargeForm"
        :rules="rechargerules"
        ref="rechargeForm"
      >
        <el-form-item
          label="钱包余额"
          prop="balance"
          class="wid-8"
          v-if="userInfo"
        >
          {{ b(userInfo.balance) }}
        </el-form-item>
        <el-form-item label="充值金额" prop="rechargeAmount" class="wid-9">
          <el-input
            size="small"
            v-model="rechargeForm.rechargeAmount"
            auto-complete="off"
            placeholder="充值金额 > 20"
          ></el-input>
        </el-form-item>
        <el-form-item label="汇率情况" v-if="preForm" class="wid-9">
          <div>
            <span>汇率：</span>
            <span>{{ preForm.exchangeRate }}</span>
          </div>
          <div>
            <span>汇率有效时长：</span>
            <span>{{ preForm.effectiveQuotationTime }}s</span>
          </div>
          <div>
            <span>转入手续费：</span>
            <span>{{ b(preForm.rechargeFee) }}</span>
          </div>
        </el-form-item>
        <el-form-item label="到账金额" v-if="preForm" class="wid-9">
          {{ b(preForm.arrivalAmount) }} {{ preForm.arrivalAmountCurrency }}
        </el-form-item>
        <el-form-item label="备注" prop="remark" class="wid-9">
          <el-input
            type="textarea"
            size="small"
            v-model.trim="rechargeForm.remark"
            :rows="5"
            auto-complete="off"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('rechargeForm')">
          取消
        </el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="preRecharge()"
        >
          查询汇率
        </el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitFormRecharge()"
        >
          充值
        </el-button>
      </div>
    </el-dialog>
    <!-- 退款界面 -->
    <el-dialog
      :close-on-click-modal="false"
      title="退款"
      :visible.sync="refundFormVisible"
      width="40%"
      @close="closeDialog('refundForm')"
    >
      <el-form
        :model="refundForm"
        :rules="refundrules"
        ref="refundForm"
        label-width="120px"
      >
        <el-form-item
          label="NK卡余额"
          prop="cardBalance"
          class="wid-8"
          v-if="cardInfo"
        >
          {{ b(cardInfo.cardBalance) }}
        </el-form-item>
        <el-form-item label="退回金额" prop="returnAmount" class="wid-9">
          <el-input
            size="small"
            v-model="refundForm.returnAmount"
            auto-complete="off"
            placeholder="退回金额 > 0.01且不能超过卡余额"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" class="wid-9">
          <el-input
            type="textarea"
            size="small"
            v-model.trim="refundForm.remark"
            :rows="5"
            auto-complete="off"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('refundForm')">
          取消
        </el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="disabled"
          class="title"
          @click="refundsubmitForm()"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑界面 -->
    <el-dialog
      :close-on-click-modal="false"
      title="编辑"
      :visible.sync="editFormVisible"
      width="40%"
      @close="closeDialog('editForm')"
    >
      <el-form :model="editForm" ref="editForm" :rules="editRules">
        
        <el-form-item label="备注" prop="remark" class="wid-8">
          <el-input
            type="textarea"
            size="small"
            v-model.trim="editForm.remark"
            :rows="5"
            auto-complete="off"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('editForm')">
          取消
        </el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="disabled"
          class="title"
          @click="editsubmitForm()"
          >提交</el-button
        >
      </div>
    </el-dialog>

    <!-- 设置限额 -->
    <!-- setLimitEdit -->
    <el-dialog
      :close-on-click-modal="false"
      title="设置限额"
      :visible.sync="setLimitVisible"
      width="40%"
      @close="closeDialog('limitForm')"
    >
 
      <el-form :model="LimitForm" ref="limitFormRef" :rules="editRules">  
        <el-form-item >  
          <div>
            单笔交易最大金额 
            <el-tooltip class="item" effect="dark" content="您可设置这张卡的单笔交易限额，当单笔交易金额超过您设置的限额后将交易失败。" placement="top-end">
              <i class="el-icon-question" title="ttrtr"></i>
            </el-tooltip>   
          </div>
          <el-input placeholder="推荐单笔最大交易额度50,000000" v-model="LimitForm.maxOnPercent" type="number" min="1" max="50000000" @input="validateInput($event, 'maxOnPercent')"> 
            <template slot="append">USD</template>
          </el-input>   
        </el-form-item>
        <el-form-item>  
          <div>
            日交易限额 
            <el-tooltip class="item" effect="dark" content="您可设置这张卡的日交易限额，当日交易超过您设置的限额后将交易失败，次日将再次可用。" placement="top-end">
              <i class="el-icon-question" title="ttrtr"></i>
            </el-tooltip>   
          </div>
          <el-input placeholder="推荐每日最大交易额度50,000,000" v-model="LimitForm.maxOnDaily"  type="number" min="1" max="50000000"  @input="validateInput($event, 'maxOnDaily')">
            <template slot="append">USD</template>
          </el-input> 
        </el-form-item>
        <el-form-item>  
          <div>
            月交易限额 
            <el-tooltip class="item" effect="dark" content="您可设置这张卡的月交易限额，当月交易超过您设置的限额后将交易失败，次月将再次可用。" placement="top-end">
              <i class="el-icon-question" title="ttrtr"></i>
            </el-tooltip>   
          </div>
          <el-input placeholder="推荐每月最大交易额度100,000,000" v-model="LimitForm.maxOnMonthly"  type="number" min="1" max="50000000"  @input="validateInput($event, 'maxOnMonthly')">
            <template slot="append">USD</template>
          </el-input> 
        </el-form-item> 
        
        <el-form-item >  
          <div style="display:flex; justify-content:space-between">
            <div>
              交易限额 
              <el-tooltip class="item" effect="dark" content="交易限额为您允许此卡用于交易的总额度(金额)，可查看“剩余额度”即此卡还可用于交易的额度，当此额度为0将不可消费。您可根据需要对交易限额进行调整，也可设为不限。" placement="top-end">
                <i class="el-icon-question" title="ttrtr"></i>
              </el-tooltip>  
            </div>
            <div>
              剩余额度：{{ LimitForm.availableTransactionLimit || '-' }}
            </div> 

          </div>
          <el-input placeholder="不限" v-model="LimitForm.totalTransactionLimit" type="number" :min="1" :max="50000000" @input="validateInput($event, 'totalTransactionLimit')">
            <template slot="append">USD</template>
          </el-input> 
        </el-form-item>   
      </el-form>

      
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('limitForm')"> 
          取消
        </el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="disabled"
          class="title"
          @click="limitsubmitForm()"
          >提交</el-button
        >
      </div>
     
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog
      :close-on-click-modal="false"
      title="限额详情"
      :visible.sync="setLimitShowVisible"
      width="40%"
      label-width="180px"
      @close="setLimitShowVisible=false"
    >
      <el-form :model="curLimitForm" ref="limitFormRef">  
        <!-- <el-form-item label="是否限制可交易额度："   >  
           {{ curLimitForm.transactionLimitType=='limited'?'限额':'不限额' }} 
        </el-form-item>  -->
        <el-form-item label="单笔交易最大金额：" >  
           {{ curLimitForm.maxOnPercent || '-' }}
        </el-form-item> 
        <el-form-item label="日交易限额："  >  
           {{ curLimitForm.maxOnDaily || '-' }}
        </el-form-item> 
        <el-form-item label="月交易限额："  >  
           {{ curLimitForm.maxOnMonthly || '-' }}
        </el-form-item> 
        
        <el-form-item label="交易限额：" >  
           {{ curLimitForm.totalTransactionLimit || '-' }}
        </el-form-item> 
        <el-form-item label="剩余额度：" >  
           {{ curLimitForm.availableTransactionLimit || '-' }}
        </el-form-item>   
      </el-form> 
    </el-dialog> 

    <!-- 设置分组 --> 
    <el-dialog
      :close-on-click-modal="false"
      title="设置分组"
      :visible.sync="setGroupShowVisible"
      width="40%"
      label-width="220px"
      @close="setGroupShowVisible=false"
    >
      <el-form :model="curLimitForm" ref="setGroupFormRef">  
         <el-form-item label="选择分组" prop="returnAmount" >
           <el-select   v-model="editForm.groupId" placeholder="请选择" style="width:300px">
            <el-option v-for="item in groupList" :label="item.groupName" :value="item.groupId" :key="item.id"></el-option> 
           </el-select>
        </el-form-item>
      </el-form> 
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('setGroupForm')"> 
          取消
        </el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="disabled"
          class="title"
          @click="setGroupsubmitForm()"
          >提交</el-button
        >
      </div>
    </el-dialog>  
    <!-- lookDetails --> 
    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam" @refresh="getdata(formInline)"></codeChoose>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  timestampToData,
  timestampSubTime,
  phoneReg,
  emailReg,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  service,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl,
  reqJson
} from "../../api/axiosFun";
import { phoneInfo, nation, getPhone, getNation } from "../../utils/cardData";
import Pagination from "../../components/Pagination";
import cardItem from "./cardItem.vue";
export default {
  data() {
    return {
      fatherName: "NK卡管理",
      isCard: true,
      userInfo: "",
      loading: false,
      cardInfo: "",
      disabled: false,
      addFormVisible: false,
      addCardFormVisible: false,
      editFormVisible: false,
      refundFormVisible: false,
      rechargeFormVisible: false,
      b: format,
      timestampToTime: timestampToTime,
      p: getPhone,
      n: getNation,
      dentialState: null,
      phoneInfo: phoneInfo,
      nation: nation,
      cardData: [
        { key: "可用", value: "normal" },
        { key: "待转入", value: "pending_recharge" },
        { key: "未激活", value: "unactivated" },
        { key: "冻结中", value: "freezing" },
        { key: "冻结", value: "frozen" },
        { key: "风控冻结", value: "risk_frozen" },
        { key: "系统冻结", value: "system_frozen" },
        { key: "解冻中", value: "unfreezing" },
        { key: "过期", value: "expired" },
        { key: "销卡中", value: "canceling" },
        // { key: "销卡", value: "cancelled" },
      ],
      cardTypeData: {
        normal: "可用",
        pending_recharge: "待转入",
        unactivated: "未激活",
        freezing: "冻结中",
        frozen: "冻结",
        risk_frozen: "风控冻结",
        system_frozen: "系统冻结",
        unfreezing: "解冻中",
        expired: "过期",
        canceling: "销卡中",
        cancelled: "销卡",
      },
      cardmsg: {
        111111:
          "支持平台: Facebook, Google, Amazon, PayPal, Shopify, Walmart, Alibaba, AliExpress…",
        553437: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress… </div>
        <div>支持面广、综合性强、使用流畅、支持全球交易。`,
        658706: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress… </div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
        404038: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>
        <div>此卡产生的所有手续费将从卡外的钱包余额中扣除。</div>
        <div>最高日交易额：10000 USD</div>`,
        441112: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>
        <div>此卡产生的所有手续费将从卡外的钱包余额中扣除。</div>`,
        519075: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>
        <div>此卡产生的所有手续费将从卡外的钱包余额中扣除。</div>
        <div>最高日交易额：10000 USD</div>
        <div style="color:red">跨境手续费=1%</div>`,
        524897: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>
        <div>此卡产生的所有手续费将从卡外的钱包余额中扣除。</div>
        <div style="color:red">跨境手续费=1%</div>`,
        531993: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>
        <div>此卡产生的所有手续费将从卡外的钱包余额中扣除。</div>
        <div style="color:red">跨境手续费=1%</div>`,
        534786: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>
        <div>此卡产生的所有手续费将从卡外的钱包余额中扣除。</div>
        <div style="color:red">跨境手续费=1%</div>`,
        553370: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>
        <div>此卡产生的所有手续费将从卡外的钱包余额中扣除。</div>
        <div>最高日交易额：10000 USD</div>
        <div style="color:red">跨境手续费=1%</div>`,
        553437: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、支持全球交易。</div>`,
        55616729: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、支持全球交易。</div>`,
        55616741: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、支持全球交易。</div>`,
        556371: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>
        <div>此卡产生的所有手续费将从卡外的钱包余额中扣除。</div>
        <div>最高日交易额：10000 USD</div>
        <div style="color:red">跨境手续费=1%</div>`,
        559292: `<div>无需AVS验证 无需3DS</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>
        <div>此卡产生的所有手续费将从卡外的钱包余额中扣除。</div> 
        <div>最高日交易额：10000 USD</div>
        <div style="color:red">跨境手续费=1%</div>`,
        658710: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
        658711: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
        658718: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
        658719: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
        658720: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
 


        54502000: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
        556150: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
        558325: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
        367178: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,
        367179: `<div>无 AVS 需3DS</div>
        <div>支持场景：OTA、电商消费、广告投放、平台店租</div>
        <div>支持平台: Facebook, Google, Amazon, PayPal, Shopify, Tiktok, Alibaba, AliExpress…</div>
        <div>支持面广、综合性强、使用流畅、性价比相对较高。</div>`,  




      },
      BinData: [],
      options: [],
      addCardForm: {
        cardExpirationDate: "",
        cardBin: "",
        cardCurrency: "USD",
        cardScheme: "VISA",
        cardType: "recharge",
        rechargeAmount: null,
        dateOfBirth: "",
        email: "",
        firstName: "",
        lastName: "",
        mobile: "",
        mobilePrefix: "86",
        nationalityCountryCode: "",
        remark: "",
        residentialAddress: "",
        residentialCity: "",
        residentialCountryCode: "",
        residentialPostalCode: "",
        residentialState: "",
      },
      addForm: {
        cardExpirationDate: "",
        cardBin: "",
        cardCurrency: "USD",
        cardScheme: "VISA",
        cardType: "recharge",
        remark: "",
        rechargeAmount: null,
        cardNum:1
      },
      editForm: {
        cardId: "",
        nickname: "",
        remark: "",
      },
      refundForm: {
        cardId: "",
        returnAmount: "",
        remark: "",
      },
      rechargeForm: {
        rechargeAmount: "",
        cardId: "",
        remark: "",
        requestId: "",
      },
      preForm: "",
      // rules表单验证
      refundrules: {
        returnAmount: [
          { required: true, message: "请输入退回金额", trigger: "blur" },
          {
            pattern: /^[0-9]+(\.\d{1,2})?$/,
            message: "退回金额 > 0.01且不能超过卡余额",
            trigger: "blur",
          },
        ],
      },
      editRules: {
        // nickname: {
        //   required: true,
        //   message: "请输入卡别名",
        //   trigger: "blur",
        // },
        remark: {
          required: true,
          message: "请输入备注",
          trigger: "blur",
        },
      },
      rulesAdd: {
        cardExpirationDate: [
          {
            required: true,
            message: "请输入卡有效期",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^([12]\d|3[0-5])$/,
            message: "请输入12~35的整数",
            trigger: "blur",
          },
        ],
        cardBin: [{ required: true, message: "请选择卡bin", trigger: "blur" }],
        cardholderId: [
          { required: true, message: "请选择持卡人", trigger: "change" },
        ],
        cardCurrency: [
          { required: true, message: "请选择开卡币种", trigger: "blur" },
        ],
        cardScheme: [
          { required: true, message: "请选择卡组织", trigger: "blur" },
        ],
        cardType: [
          { required: true, message: "请选择卡类型", trigger: "blur" },
        ],
        rechargeAmount: [
          {
            required: true,
            message: "请输入入账金额",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^([2-9][0-9]|[1-9][0-9]{2,})+(\.\d{1,2})?$/,
            message: "请输入大于20的正整数或者2位数小数",
            trigger: "blur",
          },
          
        ],
        cardNum: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      rulesAddCard: {
        cardExpirationDate: [
          {
            required: true,
            message: "请输入卡有效期",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^([12]\d|3[0-5])$/,
            message: "请输入12~35的整数",
            trigger: "blur",
          },
        ],
        cardBin: [{ required: true, message: "请选择卡bin", trigger: "blur" }],
        cardNum: [{ required: true, message: "请选择", trigger: "blur" }],
  
        cardholderId: [
          { required: true, message: "请选择持卡人", trigger: "change" },
        ],
        cardCurrency: [
          { required: true, message: "请选择开卡币种", trigger: "blur" },
        ],
        cardScheme: [
          { required: true, message: "请选择卡组织", trigger: "blur" },
        ],
        cardType: [
          { required: true, message: "请选择卡类型", trigger: "blur" },
        ],
        rechargeAmount: [
          {
            required: true,
            message: "请输入入账金额",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^([2-9][0-9]|[1-9][0-9]{2,})+(\.\d{1,2})?$/,
            message: "请输入大于20的正整数或者2位数小数",
            trigger: "blur",
          },
        ],
        dateOfBirth: [
          { required: true, message: "请选择出生日期", trigger: "blur" },
        ],
        // email: [
        //   { required: true, message: "请输入持卡人邮箱", trigger: "blur" },
        //   {
        //     pattern: emailReg,
        //     required: true,
        //     message: "请输入正确的邮箱",
        //     trigger: "blur",
        //   },
        // ],
        firstName: [
          { required: true, message: "请输入持卡人名字", trigger: "blur" },
        ],
        lastName: [
          { required: true, message: "请输入持卡人姓", trigger: "blur" },
        ],
        // mobile: [
        //   {
        //     required: true,
        //     message: "请输入手机号",
        //     trigger: ["blur", "change"],
        //   },
        //   {
        //     pattern: /^\d{7,11}$/,
        //     message: "请输入正确的手机号",
        //     trigger: "blur",
        //   },
        // ],
        nationalityCountryCode: [
          { required: true, message: "请选择国籍", trigger: "change" },
        ],
        residentialAddress: [
          { required: true, message: "请输入详细的账单地址", trigger: "blur" },
        ],
        residentialCity: [
          { required: true, message: "请输入账单城市", trigger: "blur" },
        ],
        residentialCountryCode: [
          { required: true, message: "请选择账单地国家", trigger: "change" },
        ],
        residentialPostalCode: [
          { required: true, message: "请输入账单地邮编", trigger: "blur" },
          // {
          //   pattern: /^\d+$/,
          //   message: "请输入正确的邮编",
          //   trigger: "blur",
          // },
        ],
        residentialState: [
          { required: true, message: "请输入账单地州省", trigger: "blur" },
        ],
      },
      rechargerules: {
        rechargeAmount: [
          { required: true, message: "请输入充值金额", trigger: "blur" },
          {
            pattern: /^([2-9][0-9]|[1-9][0-9]{2,})+(\.\d{1,2})?$/,
            message: "充值金额> 20且不能超过钱包余额",
            trigger: "blur",
          },
        ],
      },
      value1: "",
      formInline: {
        pageNum: 1,
        pageSize: 10,
        cardNo: "",
        cardStatus: "",
        createdAtStart: "",
        createdAtEnd: "",
        cardType: "recharge",
      }, 
      setLimitVisible:false,
      LimitForm:{}, 
      listData: "",
      changeIDList: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission2:false,
      hasPermission5:false,
      hasPermission4:false,
      hasPermission1:false,
      hasPermission:false,

      headers:'',
      verArry:[],
      verType:'',
      curItem:'', 
      curIndex:0,
      totalStatus:'',
      fd:'',

      tabList:[ 
        {
          name:'常规卡',
          value:'recharge'
        },
        {
          name:'共享卡',
          value:'share',
          
        },
      ],
      activeName:'0',
      curLimitForm:{},
      setLimitShowVisible:false,
      setGroupShowVisible:false,
      hasPermission3:false,
      groupId:'',
      groupList:[],
      info:{}
 
    };
  },
  // 注册组件
  components: {
    Pagination,
    cardItem,
    codeChoose
  },
  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
      
      if(this.$store.state.user){
        this.userInfo = JSON.parse(this.$store.state.user); 
        if(this.userInfo&&this.userInfo.verifyApi){
          this.verArry =  this.userInfo.verifyApi.split(',');
        }  
      } 
    },
  },
  created() {
    this.getInfo();
    if (this.$store.state.user) {  
      if(this.$store.state.user){
        this.userInfo = JSON.parse(this.$store.state.user); 
        if(this.userInfo&&this.userInfo.verifyApi){
          this.verArry =  this.userInfo.verifyApi.split(',');
        }  
      } 
    } 
    

    this.getdata(this.formInline);   
    this.getGroupdata();  
    
    this.getRandomEmail();
    this.getRandomPhone();

  },
 
  methods: {  
    getInfo() {
      service
        .get("/api/photon/getUserInfo", {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.userInfo = res.data;
            this.hasPermission = this.$hasPermission(this.userInfo,['common']);  
            this.hasPermission2 = this.$hasPermission(this.userInfo,['common','user2']) 
            this.hasPermission1 = this.$hasPermission(this.userInfo,['common','user1'])  
            this.hasPermission3 = this.$hasPermission(this.userInfo,['common','user3'])

            this.hasPermission5 = this.$hasPermission(this.userInfo,['common','user5']) 
            this.hasPermission4 = this.$hasPermission(this.userInfo,['common','user4'])   
            this.$store.commit("user", JSON.stringify(res.data));
            if(this.userInfo&&this.userInfo.verifyApi){
              this.verArry =  this.userInfo.verifyApi.split(',');
            } 
            if(this.userInfo.userId===1606){
              this.tabList = [ 
                {
                  name:'常规卡',
                  value:'recharge'
                }, 
              ]
            }
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getShowCvv(index,row){  
      this.curItem = row;
      this.curIndex = index;
      if(this.verArry.includes('/api/photon/getCvv')){
        this.verType = 'cvv'; 
        this.curItem = row;
        this.curIndex = index;
        this.$refs.codeRef.openDialog();        
      }else{
        this.getCvv(row)
      }
    }, 
    getCvv(row) {  
      console.log(this.curItem,'this.curItem')
      reqJson('get',"/api/photon/getCvv?cardId=" +  this.curItem.cardId, { 
      },{
        headers:{
          ...this.headers
        }
      })      
        .then((res) => {
          if (res.code == 0) {
            // this.curIndex
            this.loading = false;
            this.$set(this.listData,this.curIndex,{...row,cvv:res.data.cvv||'卡失效',expirationDate:res.data.expirationDate||'卡失效'}) 
            this.$forceUpdate()
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
 
    setgroupEdit(item){
      this.setGroupShowVisible = true;
      this.editForm =  {
        ...item,
        groupId:item.groupId?item.groupId:'',      
      };
    }, 
    validateInput(value,type) {
      // 将输入值转换为数字，如果转换失败则设置为null
      const numValue = Number(value);
      if (isNaN(numValue)) {
        this.LimitForm[type] = null;
        // this.errorMessage = '请输入一个有效的数字';
      } else if (numValue > 50000000) {
        this.LimitForm[type] = 50000000; // 或者你可以选择设置为null或其他默认值
        this.$message.error(spStr('输入值不能超过50000000', "PhotonPay", "")); 
      } else {
         
      }
    },
    lookDetails(item){ 
      this.setLimitShowVisible = true;
      this.curLimitForm = item;
    }, 
    getGroupdata() {
      let url = getUrl({
        currentPage:1,
        pageSize:999, 
        type:0,//0=Gwhale卡,1=星汇,2=星际
      });
      service
        .get("/api/photon/groupList" + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.groupList = res.rows; 
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    setGroupsubmitForm(){  
      if(!this.editForm.groupId) {
        return this.$message.error('请选择分组');
      }
      reqJson('post','/api/photon/bindingGroup/'+this.editForm.groupId, {
        ids:[this.editForm.id],
        type:0, //0=Gwhale卡,1=星汇,2=星际
      },{
        // headers:{
        //   ...this.headers
        // }
      })     
      .then((res) => {
        if (res.code == 0) { 
          this.loading = false;
          this.$message({
            message: spStr(res.msg, "PhotonPay", ""),
            type: "success",
          });
          this.getdata(this.formInline);
          this.closeDialog("setGroupForm");
        } else {
          this.loading = false;
          this.$message.error(spStr(res.msg, "PhotonPay", ""));
          return;
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });
    },
    limitsubmitForm(){  
      if(this.LimitForm.maxOnDaily&&this.LimitForm.maxOnPercent&&this.LimitForm.maxOnPercent>this.LimitForm.maxOnDaily) {
        return this.$message.error(spStr('单日限额不可小于单笔限额', "PhotonPay", ""));
      } 
      if(this.LimitForm.maxOnDaily&&this.LimitForm.maxOnPercent&&this.LimitForm.maxOnMonthly<this.LimitForm.maxOnPercent){
        return this.$message.error(spStr('月限额不可小于单日限额', "PhotonPay", "")); 
      }  
      reqJson('post','/api/photon/cardModify', this.LimitForm,{
        headers:{
          ...this.headers
        }
      })     
      .then((res) => {
        if (res.code == 0) {
          this.closeDialog("limitForm");
          this.loading = false;
          this.$message({
            message: spStr(res.msg, "PhotonPay", ""),
            type: "success",
          });
          this.getdata(this.formInline);
        } else {
          this.loading = false;
          this.$message.error(spStr(res.msg, "PhotonPay", ""));
          return;
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });
    },
    // /htp/api/photon/
    setLimitEdit(row){ 
      // limited=限额,unlimited=不限额
      console.log(row,'56666')
      // &&row.transactionLimitType=='limited'
      this.LimitForm={
        ...row
      }
      this.setLimitVisible = true 
    }, 
    changeTab(index,item) { 
      this.pageparm.currentPage = 1;
      this.pageparm.pageSize = 10;
      this.activeName = index;
      this.formInline.cardType = item.value;
      this.addCardForm.cardType = item.value;
      this.addForm.cardType = item.value; 
      this.getdata(this.formInline)
    },
    getParam(val,type){  
      this.headers = val 
      if(type=="freezeCard" || type=="unFreezeCard"){  
        this.editFreezeCard();
      }else if(type=="freezeCards" || type=="unFreezeCards"){
        this.editIsfreezeEdits();
      }else if(type=="fast"){
        this.submitFormFast(); 
      }else if(type=="noraml"){
        this.submitFormCardNormal(); 
      }else if(type=="xiao"){
        this.editSaveAuth();
      }else if(type=="xiaos"){
        this.editSaveAuthS();
      } else if(type=="update"){
        this.updateCardVerify();
      } else if(type=="cardRecharge"){
        this.editcardRecharge();
      } else if(type=="cardRefund"){
        this.editRefundsubmit();
      } else if(type=='cvv'){
        this.getCvv();
      }   

    },  
    hasPermissionMethod(data) { 
      if (this.$store.state.user) {
        this.userInfo = JSON.parse(this.$store.state.user);
        return this.$hasPermission(this.userInfo,data) 
      }
      
    },
    exportEx() {
      let url = getUrl(this.formInline);
      service
        .post("/api/photon/exportCardList" + url, {})
        .then((res) => {
          this.loading = false; 
          if (res.code == 0) {
            window.open(
              baseURL + "/common/download?fileName=" + res.msg,
              "_blank"
            );
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err);
        });
    },
    createdData() {
      if (this.value1) {
        this.formInline.createdAtStart = timestampSubTime(
          this.value1[0]
        );
        this.formInline.createdAtEnd = timestampSubTime(
          this.value1[1]
        );
      } else {
        this.formInline.createdAtStart = "";
        this.formInline.createdAtEnd = "";
      }
    },
    getdata(parameter) {
      let url = getUrl(parameter);
      // +'&userId='+this.formInline.userId+'&parentUserId='+this.formInline.parentUserId
      service
        .get("/api/photon/cardList" + url)
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    getChild(e) {
      this.dentialState = e.child;
      this.editForm.residentialState = "";
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    getRandomDate() {
      const currentDate = new Date();
      const randomDay = Math.floor(Math.random() * 365); // 随机一年中的一天
      const yearsBefore = Math.round(Math.random() * (49 - 20) + 20);
      currentDate.setFullYear(currentDate.getFullYear() - yearsBefore); // 减去年数
      currentDate.setDate(currentDate.getDate() - randomDay); // 减去随机天数
      this.addCardForm.dateOfBirth = timestampToData(currentDate);
    },
    getRandomEmail() { 
      const randomInt = (min, max) =>
        Math.floor(Math.random() * (max - min + 1)) + min;
      const randomString = (length) => {
        let result = "";
        const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
        const charactersLength = characters.length;
        for (let i = 0; i < length; i++) {
          result += characters.charAt(
            Math.floor(Math.random() * charactersLength)
          );
        }
        return result;
      };
      const domainNames = ["gmail", "yahoo", "outlook", "hotmail"];
      const randomDomain = domainNames[randomInt(0, domainNames.length - 1)];
      const userName = randomString(randomInt(5, 10));
      this.addCardForm.email = `${userName}@novalinkpay.com`;
    },
    getRandomPhone() {
      const randomInt = (min, max) =>
          Math.floor(Math.random() * (max - min + 1)) + min,
        i = randomInt(0, this.phoneInfo.length - 1);
      // 前缀
      let f = this.phoneInfo[i].value;
      this.addCardForm.mobilePrefix = f;
      if (f == 86) {
        let num = "1",
          random = Math.random();
        if (random >= 0.1 && random < 0.2) {
          num += "5";
        } else if (random >= 0.05 && random < 0.1) {
          num += "8";
        } else if (random >= 0 && random < 0.05) {
          num += "7";
        } else {
          num += "3";
        }
        let numLen9 = "";
        for (let j = 0; j < 9; j++) {
          numLen9 += Math.floor(Math.random() * 10);
        }
        this.addCardForm.mobile = num + numLen9;
      } else {
        let num = randomInt(7, 15 - f.length);
        let numLenN = "";
        for (let i = 0; i < num; i++) {
          numLenN += Math.floor(Math.random() * 10);
        }
        this.addCardForm.mobile = numLenN;
      }
    },
    changCard(k, info) {
      this.cardInfo = info;
      this.isCard = k.myCard;
    },
    handleEdit(name) {
      if (this.userInfo.authType == 2) {
        this.changeBin();
        if (name == "addForm") {
          this.addFormVisible = true;
        } else {
          this.addCardFormVisible = true;
        }
      } else {
        this.$confirm(
          "暂未查询到您的认证信息，请先完成企业认证再开卡！",
          "信息",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.$router.push({ path: "/companyAuth" });
          })
          .catch(() => {});
      }
    },
    changEdit(row) {
      this.editFormVisible = true;
      this.editForm.cardId = row.cardId;
      this.editForm.nickname = row.nickname;
      this.editForm.remark = row.remark;
      this.editForm.id = row.id;
    },
    dateTime(num) {
      if (this.addCardFormVisible) {
        this.addCardForm.cardExpirationDate = num;
        document.querySelector(".timeCard .el-input__inner").focus();
      } else {
        this.addForm.cardExpirationDate = num;
        document.querySelector(".time .el-input__inner").focus();
      }
    },
    changeBin() {
      let url = "",
        parameter = {
          cardCurrency: this.addForm.cardCurrency,
          cardScheme: this.addForm.cardScheme,
          cardType: this.formInline.cardType,
        };
      if (this.addCardFormVisible) {
        parameter = {
          cardCurrency: this.addCardForm.cardCurrency,
          cardScheme: this.addCardForm.cardScheme,
          cardType: this.formInline.cardType,
        };
      }
      url = getUrl(parameter);
      service
        .get("/api/photon/getCardBin" + url)
        .then((res) => {
          if (res.code == 0) {
            this.BinData = res.data;
            if (this.addCardFormVisible) {
              this.addCardForm.cardBin = res.data[0].cardBin;
            } else {
              this.addForm.cardBin = res.data[0].cardBin;
            }
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },

    FormCardVer(type){
      this.verType = type
      this.$refs.codeRef.openDialog();   
    },
    submitForm() {  //快速开卡
      this.$refs.addForm.validate((valid) => {
        if (valid) { 
        
          if (this.formInline.cardType == "share") {
            if (this.userInfo.matrixBalance < 0) {
              this.$message.error("钱包余额不足，请先充值！");
              return;
            }
          }else{
            // console.log(this.addForm.rechargeAmount * Number(this.addForm.cardNum),'3333')
            if (
              this.userInfo.balance < 0 ||
              this.userInfo.balance < this.addForm.rechargeAmount * Number(this.addForm.cardNum) 
            ) {
              this.$message.error("钱包余额不足，请先充值！");
              return;
            }
          }
          
          this.loading = true;
          
          if (this.addForm.cardType == "share") {
            this.addForm.rechargeAmount = 23;
          }  
          this.submitFormFast();  
        
        } else {
          return false;
        }
      });
    },
    submitFormFast(){ 
      reqJson('post','/api/photon/cardApply', this.addForm,{
        headers:{
          ...this.headers
        }
      })     
      .then((res) => {
        if (res.code == 0) {
          this.closeDialog("addForm");
          this.loading = false;
          this.$message({
            message: spStr(res.msg, "PhotonPay", ""),
            type: "success",
          });
          this.getdata(this.formInline);
        } else {
          this.loading = false;
          this.$message.error(spStr(res.msg, "PhotonPay", ""));
          return;
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });
    },
    submitFormCard() {
      
      this.$refs.addCardForm.validate((valid) => {
        if (valid) {
         

          if (this.formInline.cardType == "share") {
            if (this.userInfo.matrixBalance < 0) {
              this.$message.error("钱包余额不足，请先充值！");
              return;
            }
          }else{
            console.log(this.addCardForm.rechargeAmount*Number(this.addForm.cardNum),'455555')
            if (
              this.userInfo.balance < 0 ||
              this.userInfo.balance < this.addCardForm.rechargeAmount*Number(this.addForm.cardNum) 
            ) {
              this.$message.error("钱包余额不足，请先充值！");
              return;
            }

          }
         
          this.addCardForm.dateOfBirth = timestampToData(
            this.addCardForm.dateOfBirth
          );
          this.loading = true;
          if (this.addCardForm.cardType == "share") {
            this.addCardForm.rechargeAmount = 23;
          }
          this.submitFormCardNormal();
          
        } else {
          return false;
        }
      });
    },
    submitFormCardNormal(){ 
        reqJson('post','/api/photon/cardAndHolderApply', this.addCardForm,{
          headers:{
            ...this.headers
          }
        })      
      //  service
      //       .post("/api/photon/cardAndHolderApply", this.addCardForm)
        .then((res) => {
          if (res.code == 0) {
            this.closeDialog("addCardForm");
            this.loading = false;
            this.$message({
              message: spStr(res.msg, "PhotonPay", ""),
              type: "success",
            });
            this.getdata(this.formInline);
          } else {
            this.loading = false;
            this.$message.error(res.msg, "PhotonPay", "");
            return;
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    editsubmitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {  
          service
            .post("/api/photon/cardModify", this.editForm)
            .then((res) => {
              if (res.code == 0) {
                this.closeDialog("editForm");
                this.loading = false;
                this.$message({
                  message: spStr(res.msg, "PhotonPay", ""),
                  type: "success",
                });
                // this.updateCard(this.editForm.cardId);
                // this.updateCardVerify();
                this.getdata(this.formInline);
              } else {
                this.$message.error(spStr(res.msg, "PhotonPay", ""));
                return;
              }
            })
            .catch((err) => {
              this.$message.error(spStr(err, "PhotonPay", ""));
            });
        } else {
          return false;
        }
      });
    },
    rechargeEdit(index, row) {
      this.rechargeFormVisible = true;
      this.cardInfo = row;
      this.rechargeForm.cardId = row.cardId;
    },
    preRecharge() {
      this.$refs.rechargeForm.validate((valid) => {
        if (!valid) {
          return;
        }
        service
          .get(
            "/api/photon/preRecharge?cardId=" +
              this.rechargeForm.cardId +
              "&rechargeAmount=" +
              this.rechargeForm.rechargeAmount
          )
          .then((res) => {
            if (res.code == 0) {
              this.preForm = res.data;
              this.rechargeForm.requestId = res.data.requestId;
            } else {
              this.$message.error(spStr(res.msg, "PhotonPay", ""));
            }
          })
          .catch((err) => {
            this.$message.error(spStr(err, "PhotonPay", ""));
          });
      });
    },
    editcardRecharge(){
      let parm = {
          cardId: this.rechargeForm.cardId,
          remark: this.rechargeForm.remark,
          requestId: this.rechargeForm.requestId,
        },
        url = getUrl(parm);

        reqJson('post',"/api/photon/cardRecharge" + url,{},{
          headers:{
            ...this.headers
          }
        })      

      // service
      //   .post("/api/photon/cardRecharge" + url, {})
        .then((res) => {
          if (res.code == 0) {
            this.$message({
              message: spStr(res.msg, "PhotonPay", ""),
              type: "success",
            });
            this.closeDialog("rechargeForm");
            // this.updateCard(res.data.cardId);
            this.updateCardVerify();
          } else {
            this.$message.error(spStr(res.msg, "PhotonPay", ""));
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    submitFormRecharge() {
      this.$refs.rechargeForm.validate((valid) => {
        if (!valid) {
          return;
        }
        if (!this.rechargeForm.requestId) {
          this.$message.error("请先查询汇率");
          return;
        }

        this.curItem = this.rechargeForm;
        if(this.verArry.includes('/api/photon/cardRecharge')){
          this.verType = 'cardRecharge' 
          this.$refs.codeRef.openDialog(); 
        }else{
          this.editcardRecharge();
        }   


        
      });
    },
    refundEdit(index, row) {
      this.refundFormVisible = true;
      this.refundForm.cardId = row.cardId;
      this.cardInfo = row;
    },

    editRefundsubmit(){    
      let url = getUrl(this.refundForm); 
        reqJson('post',"/api/photon/cardRefund" + url,{},{
          headers:{
            ...this.headers
          }
        }).then((res) => {
          if (res.code == 0) {
            this.closeDialog("refundForm");
            this.$message({
              message: spStr(res.msg, "PhotonPay", ""),
              type: "success",
            });
            this.updateCard(this.cardInfo.cardId);
          } else {
            this.$message.error(spStr(res.msg, "PhotonPay", ""));
            return;
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },

    refundsubmitForm() {
      this.$refs.refundForm.validate((valid) => {
        if (valid) { 
          if(this.verArry.includes('/api/photon/cardRefund')){
            this.verType = 'cardRefund' 
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editRefundsubmit();
          }   

 
        } else {
          return false;
        }
      });
    }, 
    editSaveAuth(){     
        reqJson('post',"/api/photon/cardClose?cardId=" + this.curItem.cardId,{},{
          headers:{
            ...this.headers
          }
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success("提交成功，请等待...");
            // this.updateCard(this.curItem.id);
            this.updateCardVerify(this.curItem.id);
          } else {
            this.$message.error(spStr(res.msg, "PhotonPay", ""));
            return;
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        }); 
    },
    // 销卡
    deleteEdit(index, row) {
      // this.$confirm("销卡后余额将退回到钱包余额,请问您确定要销卡吗?", "信息", {
      this.$confirm(
        `销卡后余额将退回到钱包余额,请问您确定要销卡吗?<div class="text-gray font12">除DC是实时销卡以外，其他卡片销卡完成需要8个工作日</div>`,
        "信息",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => { 
          this.curItem = row;
           if(this.verArry.includes('/api/photon/cardClose')){
              this.verType = 'xiao' 
              this.$refs.codeRef.openDialog(); 
            }else{
              this.editSaveAuth();
            }   
         
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消销卡",
          });
        });
    },
    isfreezeEdit(name, status, row) {
      // this.$confirm("请问您确定要" + name + "该卡吗?", "信息", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     let parms = {
      //         cardId: row.cardId,
      //         status: status, 
      //       },
      //       url = getUrl(parms);
      //     service
      //       .post("/api/photon/freezeCard" + url)
      //       .then((res) => {
      //         if (res.code == 0) {
      //           this.$message.success("操作成功，请等待...");
      //           this.updateCard(row.cardId);
      //         } else {
      //           this.$message.error(spStr(res.msg, "PhotonPay", ""));
      //           return;
      //         }
      //       })
      //       .catch((err) => {
      //         this.$message.error(spStr(err, "PhotonPay", ""));
      //       });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消" + name + "卡",
      //     });
      //   });

      this.curItem = row
      let that = this
      this.$confirm("请问您确定要" + name + "该卡吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let parms = {
              cardId: row.cardId,
              status: status,
              userId: row.userId,
            },
            url = getUrl(parms);    
            if(that.verArry.includes('/api/photon/freezeCard')&&this.curItem.cardStatus!= 'normal'){
              that.verType = 'freezeCard' 
              that.$refs.codeRef.openDialog(); 
            }else if(that.verArry.includes('/api/photon/unFreezeCard')&&this.curItem.cardStatus!= 'frozen'){
              that.verType = 'unFreezeCard' 
              that.$refs.codeRef.openDialog(); 
            }else{
              this.editFreezeCard();
            }  
            
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消" + name + "卡",
          });
        });
        
    },
    editFreezeCard(){   
      // console.log(this.curItem,'this.curItem')
      let  url = this.curItem.cardStatus=='normal'?'/api/photon/freezeCard':'/api/photon/unFreezeCard'  
      reqJson('post',url+"?cardId=" + this.curItem.cardId+'&userId='+ this.curItem.userId, {
        cardId:this.curItem.cardId
      },{
        headers:{
          ...this.headers
        }
      })    
      .then((res) => {
        if (res.code == 0) {
          this.$message.success("操作成功，请等待...");
          this.getdata(this.formInline);
          this.updateCard(row.cardId);
        } else {
          this.$message.error(spStr(res.msg, "PhotonPay", ""));
          return;
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });
    },
    updateCardVerify(id) {
      reqJson('post',"/api/photon/cardRefresh?cardId=" + this.fd || this.curItem.cardId || id,{},{
        headers:{
          ...this.headers
        }
      }).then((res) => {
        if (res.code == 0) {
          this.getdata(this.formInline);
          this.$message.success("操作成功");
        } else {
          this.$message.error(spStr(res.msg, "PhotonPay", ""));
          return;
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      }); 
    },

    updateCard(id) {
      this.fd= id;  
      if(this.verArry.includes('/api/photon/cardRefresh')){
        this.verType = 'update' 
        this.$refs.codeRef.openDialog(); 
      }else{
        this.updateCardVerify();
      }   
    },
    // 关闭编辑、增加弹出框
    closeDialog(formName) {
      if (formName == "refundForm") {
        this.refundFormVisible = false;
        this.$refs.refundForm.resetFields();
      } else if (formName == "rechargeForm") {
        this.rechargeFormVisible = false;
        this.$refs.rechargeForm.resetFields();
        this.preForm = "";
      } else if (formName == "addForm") {
        this.addFormVisible = false;
        this.$refs.addForm.resetFields();
      } else if (formName == "editForm") {
        this.editFormVisible = false;
        this.$refs.editForm.resetFields();
      } else if (formName == "addCardForm") {
        this.addCardFormVisible = false;
        this.$refs.addCardForm.resetFields();
      }else if (formName == "limitForm") {
        this.setLimitVisible = false;
        this.$refs.limitFormRef.resetFields();
      }else if (formName == "setGroupForm") {
        this.setGroupShowVisible = false;
        this.$refs.setGroupFormRef.closeDialog();
      }     

    },
    toggleSelection(rows) {
      this.changeIDList = [];
      rows.forEach((i) => {
        this.changeIDList.push(i.cardId);
      });
    },
    isfreezeEdits(name, status) {  
      this.totalStatus = status
      let that = this
      this.$confirm("请问您确定要" + name + "该卡吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => { 
          let parms = {
              cardIds: this.changeIDList.toString(),
              status: status, 
            },
            url = getUrl(parms);  
            if(that.verArry.includes('/api/photon/freezeCards')&&this.totalStatus!= 'freeze'){
              that.verType = 'freezeCards' 
              that.$refs.codeRef.openDialog(); 
            }else if(that.verArry.includes('/api/photon/unFreezeCards')&&this.totalStatus!= 'unfreeze'){
              that.verType = 'unFreezeCards' 
              that.$refs.codeRef.openDialog(); 
            }else{
              this.editIsfreezeEdits();
            }   
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消" + name + "卡",
          });
        }); 
    },  
    editIsfreezeEdits(){ 
      let  url = this.totalStatus=='freeze'?'/api/photon/freezeCards':'/api/photon/unFreezeCards'   
      let parms = {
        cardIds: this.changeIDList.toString(), 
        userIds: this.changeIDList.toString(),
      } 
      reqJson('post',url+getUrl(parms), { 
        // ...parms
      },{
        headers:{
          ...this.headers
        }
      })    
      .then((res) => {
        if (res.code == 0) {
          this.$message.success("数据处理中，请稍后刷新列表查看...");
        } else {
          this.$message.error(spStr(res.msg, "PhotonPay", ""));
          return;
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });

    },


    editSaveAuthS(){    
        reqJson('post',"/api/photon/cardCloses?cardIds=" + this.changeIDList.toString(),{},{
          headers:{
            ...this.headers
          }
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success("数据处理中，请稍后刷新列表查看...");
            this.getdata(this.formInline);
          } else {
            this.$message.error(spStr(res.msg, "PhotonPay", ""));
            return;
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        }); 
    }, 

    // 销卡
    deleteEdits() {
      // this.$confirm("销卡后余额将退回到钱包余额,请问您确定要销卡吗?", "信息", {
      this.$confirm(
        `销卡后余额将退回到钱包余额,请问您确定要销卡吗?<div class="text-gray font12">除DC是实时销卡以外，其他卡片销卡完成需要8个工作日</div>`,
        "信息",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {  
          if(this.verArry.includes('/api/photon/cardCloses')){
            this.verType = 'xiaos' 
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editSaveAuthS(); 
          }  

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消销卡",
          });
        });
    },
    copyText(text) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          this.$message.success("复制成功");
        })
        .catch((err) => {
          // 复制失败
          console.error("复制失败");
        });
    },
  },
};
</script>

<style scoped>
/* .el-form-item {
  display: inline-block;
  margin-left: 2%;
} */
.copyBtn:hover{
  color: #409eff;
  cursor: pointer;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.select10 .el-select,
.select10 .el-input {
  width: 100%;
}

.select8 .el-select,
.select8 .el-input {
  width: 80%;
}

.el-form-item .mobilePrefix {
  width: 110px;
}

/deep/ .radio_box .el-radio-button .el-radio-button__inner {
  margin-right: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

/deep/ .radio_box .el-radio-button.is-active .el-radio-button__inner {
  box-shadow: 0px 0 0 0 #409eff;
}
/* .deepC {
  background-color: #6b6bd1 !important;
  border-color: #6b6bd1 !important;
}
.deepg {
  background-color: #439a86 !important;
  border-color: #439a86 !important;
}
.deepC.is-disabled,
.deepg.is-disabled {
  background-color: #b8c0cc !important;
  border-color: #b8c0cc !important;
} */


.tabBox{
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.tabBox span{
  padding: 10px;
  margin: 0 20px;
  display: inline-block;
  cursor: pointer;
  font-size: 18px;
}
.tabBox span.cur{ 
  /* background: #e3b85a; */
  color: #e3b85a;
  font-weight: bold;
  border-bottom: 4px solid #e3b85a;
  /* border-radius: 4px; */

}
</style>

 
 